<template>
  <div class="firstBg">
    <div class="topBox">
      疫情防控综合平台
    </div>
    <div class="loadPosition">
      <el-form :model="loginParams" :inline="true" ref="loginParams" label-width="100px" class="formView">
        <el-form-item prop="account"
                      :rules="{ required: true, message: '请输入用户名', trigger: 'blur' }">
          <el-input v-model="loginParams.account" class="inputView"
                    placeholder="用户名" prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>
        <el-form-item
          prop="password"
          :rules="{ required: true, message: '请输入密码', trigger: 'blur' }">
          <el-input class="inputView" type="password" v-model="loginParams.password"
                    placeholder="密码" prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <el-form-item
          prop="verificationCode"
          :rules="{ required: true, message: '请输入验证码', trigger: 'blur' }">
          <el-input class="inputView" type="password" v-model="loginParams.verificationCode"
                    placeholder="验证码" prefix-icon="el-icon-key"></el-input>
          <canvas @click="refresh" class="YZM" width="80" height="30"></canvas>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="inputView" @click="login('loginParams')" style="font-size: 20px">登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

  import {
    mapActions
  } from 'vuex';

  export default {
    name: 'Login',
    data() {
      return {
        winHeight: 0,
        loginParams: {
          account: '',
          password: '',
          verificationCode: '',
        },
      }
    },
    methods: {
      ...mapActions([
        "saveUserInfo"
      ]),
      //获取验证码
      getVerificationCode() {
        this.$ajax.login.getVerificationCode().then(data => {
          let res = data.data
          this.draw(res)
        })
      },
      login(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$ajax.login.loginIn({...this.loginParams}).then(data => {
              this.saveUserInfo({name:this.loginParams.account})
              localStorage.setItem("Token", data.data)
              this.$router.push({path: '/dashboard'})
            })
          } else {
            console.log('error submit!!')
          }
        })
      },
      getRandom(min, max) {
        return Math.random() * (max - min) + min;
      },
      draw(showNum) {
        //获取canvas
        // var canvas = document.getElementsByTagName('canvas')[0]
        var canvas = $('.YZM')[0]

        var ctx = canvas.getContext('2d')

        //获取画布的宽度和高度
        var canvas_width = 80
        var canvas_height = 30

        //清空之前绘制的内容
        //0,0 清空的起始坐标
        //矩形的宽度和高度
        ctx.clearRect(0, 0, canvas_width, canvas_height)

        //开始绘制
        var txt = showNum.split('')
        for (var i = 0; i < 4; i++) {
          //开始控制字符的绘制位置
          var x = 5 + 20 * i//每一个验证码绘制的起始点的x坐标
          var y = 20 + Math.random() * 8//起始点y坐标

          ctx.font = 'bold 20px 微软雅黑'

          //开始旋转字符
          var deg = Math.random() - 0.5
          //canvas想实现绘制内容具有倾斜效果,必须先平移
          //为了把旋转点移动到绘制内容的地方
          ctx.translate(x, y)
          ctx.rotate(deg)
          //设置绘制的颜色随机的颜色
          ctx.fillStyle = this.randomColor()
          ctx.fillText(txt[i], 0, 0)
          //把canvas复原
          ctx.rotate(-deg)
          ctx.translate(-x, -y)
          // ctx.stroke()
        }
        for (var i = 0; i <= 30; i++) {
          if (i < 5) {
            //绘制线
            ctx.strokeStyle = this.randomColor()
            ctx.beginPath()
            ctx.moveTo(Math.random() * canvas_width, Math.random() * canvas_height)
            ctx.lineTo(Math.random() * canvas_width, Math.random() * canvas_height)
            ctx.stroke()
          }
          //绘制点
          ctx.strokeStyle = this.randomColor()
          ctx.beginPath()
          x = Math.random() * canvas_width
          y = Math.random() * canvas_height
          ctx.moveTo(x, y)
          ctx.lineTo(x + 1, y + 1)
          ctx.stroke()
        }
      },
      randomColor() {
        var r = Math.floor(Math.random() * 256)
        var g = Math.floor(Math.random() * 256)
        var b = Math.floor(Math.random() * 256)
        return `rgb(${r},${g},${b})`
      },
      refresh() {
        this.getVerificationCode()
      }
    },
    mounted() {
      this.getVerificationCode()
    }
  }
</script>

<style lang="scss">
  .firstBg {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    align-items: center;
    background-repeat: no-repeat;

    .loadPosition {
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
      background-position: center;
    }

    .formView {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin: 20px 60px;

      position: relative;
    }

    .inputView {
      width: 20vw;
      margin: 20px 0px 0px 0px;
      border-radius: 6px;

    }

    .headerLogo {
      position: absolute;
      top: 30px;
      left: 30px;
      display: flex;
      align-items: center;
    }

    .headerLogo img {
      display: inline-block;
    }

    .nameView {
      color: white;
    }

    .topBox {
      width: 100%;
      height: 85px;
      background: #0297d7fe;
      text-align: center;
      font-size: 20px;
      line-height: 85px;
      color: #fff;
      font-weight: bold;
    }

    .el-input__icon {
      color: #0297d7fe;
    }

    .YZM {
      position: absolute;
      right: 6px;
      top: 26px;
      cursor: pointer;
    }

  }


</style>


